<template>
	<view class="detect-report-component">
		<hsb-common-popup-header
			title="检测详情"
			@close="$emit('close')"
		/>
		<view class="detect-report-body">
			<view class="base-detect-detail">
				<view class="base-detect-header">
					<view v-if="isSameModel" class="left-label">你的预估机况</view>
					<view class="right-label">质检结果</view>
				</view>
				<view v-if="!isSameModel" class="diff-model">
					本单机型实际为{{ reportInfo.recycleNewProduct || '' }}，与估价所选机型不一致。
				</view>
				<scroll-view
					scroll-y="true"
					:class="[
						'base-detect-scroll',
						{
							only: !hasOtherDetect
						}
					]"
				>
					<view
						v-for="(item, index) in detectList"
						:key="index"
						class="detect-item"
					>
						<view class="left-label">{{ item.answer }}</view>
						<view class="center-line"></view>
						<view class="right-label fixed">
							<image v-if="item.diff === '1' && isSameModel" src="https://s1.huishoubao.com/static/business-component/icon_warn.png" class="icon-status"></image>
							<image v-else src="https://s1.huishoubao.com/static/business-component/icon_ok.png" class="icon-status"></image>
							<text v-if="isSameModel" :class="['status-txt', { diff: item.diff === '1' }]">{{ item.diff === '1' ? '不相符' : '相符' }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-if="hasOtherDetect" class="other-detect-detail">
				<view class="base-detect-header">
					<view class="left-label">其他质检项</view>
					<view class="right-label">质检结果</view>
				</view>
				<scroll-view
					scroll-y="true"
					class="base-detect-scroll"
				>
					<view
						v-for="(item, index) in otherList"
						:key="index"
						class="detect-item"
					>
						<view class="left-label fixed">{{ item.question }}</view>
						<view class="center-line"></view>
						<view class="right-label">
							<text>{{ item.answer }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="detect-report-footer">
			<view class="button" @click="$emit('report')">查看详细质检报告</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		reportInfo: Object
	},
	computed: {
		isSameModel () {
			return this.reportInfo.isSameModel
		},
		detectList () {
			return this.reportInfo.detectList || []
		},
		otherList () {
			return this.reportInfo.otherDiffOptions || []
		},
		hasOtherDetect () {
			return this.isSameModel && this.otherList.length
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>